<!-- 任务一级页面 -->
<template>
  
<view class="taskPage" >

<!-- 背景+顶部 -->
  <view  class="bg">
      <view class="userInfoBg"></view>
      <ul class="box-t">
           <li class="box-t-list">
               <view class="tit">
                 今日任务
               </view>
               <view class="taskNum">
                 <text class="NumColor1">17</text> 个
               </view>
               <view class="triangle" id="round-triangle"></view>
               <view class="img">
                 <image src="../../static/images/todaytask.png" mode=""></image>
               </view>
           </li>
           <li class="box-t-list">
               <view class="tit">
                 未完成
               </view>
               <view class="taskNum">
                 <text class="NumColor2">12</text> 个
             </view>
             <view class="triangle" id="round-triangle"></view>
             <view class="img">
               <image src="../../static/images/time.png" mode=""></image>
             </view>
           </li>
           <li class="box-t-list">
               <view class="tit">
                 已完成
               </view>
               <view class="taskNum">
                 <text class="NumColor3">5</text> 个
               </view>
               <view class="triangle" id="round-triangle"></view>
               <view class="img">
                 <image src="../../static/images/good.png" mode=""></image>
               </view>
           </li>
         </ul>
  </view>
 

 <!-- 日历卡牌 -->
 <view class="box-c">
     <scroll-view scroll-x="true" class="date">
       
       <view class="dateCard" @click="goPage(item.startTime,item.endTime)" v-for="(item, index) in dateRanges" :key="index" :class="{'highlight': index===3 }">
       {{ item.day }}
       </view >
         
         <view class="dateCard cardFont" @click="goPage()">  
           全部...
         </view>
         
     </scroll-view>
 </view>

<!-- 页面内容若为空 -->
  <view class="box-bg" v-if="pageShow === true">
    <image src="../../static/images/taskImage.png" mode=""></image>
    <view class="bg-txt">
      暂无任务
    </view>
  </view>
  
  <view class="addBtn" @click="addTask()">
    添加任务
  </view>
  <!-- refresher-enabled :refresher-triggered="isPulling" -->
    <!-- @refresherrefresh="resetData" -->
  <scroll-view class="box-b" scroll-y enable-back-to-top  v-if="pageShow === false">
<view class="listBox" v-for="(item,index) in detailRes" :key="item.id" @click="goDetail(item.id)">
  <!-- 标题 -->
  <view class="listTit">
    <view class="tit">
     {{index + 1}} {{item.name}}
    </view>
    <view class="state" :class="item.state === 0 ? 'stateColor1' : 'stateColor2'">
     {{item.state === 0 ? "未完成": "完成"}}
    </view>
  </view>
  <!-- 内容 -->
  <view class="listDetail" >
    <view class="txt">
      <view class="pic"><image src="../../static/icons/位置.png" mode=""></image></view> <text>{{item.landName}}</text>
    </view>
<!--    <view class="txt">
      <image src="../../static/icons/empty-box.png" mode=""></image>农药2袋
    </view> -->
    <view class="txt">
      <view class="pic"><image src="../../static/icons/时间_o.png" mode=""> </view></image> <text>开始时间：{{item.startTime}}</text> 
    </view>
    <view class="txt">
     <view class="pic"> <image src="../../static/icons/时间_o.png" mode=""> </image></view> <text>结束时间：{{item.endTime}}</text>
    </view>
  </view>
  
</view>
</scroll-view>

</view>
</template>

<script>
  import {getTaskCount, postTaskListApi,getTaskCountApi} from '@/api/task.js'
  export default {
    data() {
      return {
        dateRanges: [],
        pageShow:true,
        detailRes:[]
      };
    },
    // mounted() {
    //   this.getDates();
    //   this.getListDetail(this.dateRanges[3].startTime,this.dateRanges[3].endTime);
    // },
    onShow() {
      this.getDates();
      this.getTaskCount()
      this.getListDetail(this.dateRanges[3].startTime,this.dateRanges[3].endTime);
    },
    methods: {
      // 获取卡牌时间
     getDates() {
       this.dateRanges = []
        const today = new Date();
          today.setHours(0, 0, 0, 0); // 重置时分秒毫秒为零
          for (let i = -3; i <= 5; i++) {
            const currentDay = new Date(today);
            currentDay.setDate(currentDay.getDate() + i);
            // 获取 startTime
            const startTime = this.formatDate(currentDay) + ' 00:00:00';
            // 获取 endTime
            currentDay.setHours(23, 59, 59); // 设置时分秒为 23:59:59
            const endTime = this.formatDate(currentDay) + ' 23:59:59';
            // 获取 day
            const day = String(currentDay.getDate()).padStart(2, '0');
             // console.log(startTime,endTime,day);
            this.dateRanges.push({
              startTime,
              endTime,
              day,
            });
        }
     },
        
        formatDate(date) {
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, '0');
          const day = String(date.getDate()).padStart(2, '0');
          // console.log(`${year}-${month}-${day}`);
          return `${year}-${month}-${day}`;
        },
      
      // 获取任务一级页列表
      async getListDetail(startTime,endTime) {
        const res = await postTaskListApi({startTime,endTime})
        res !== [] ? this.pageShow = false : this.pageShow = true
        this.detailRes = res
        console.log(res);
      },
      // 顶部统计数据
      async getTaskCount() {
        const res = await getTaskCountApi()
        console.log(res);
      } ,
   
   // 点击卡牌跳转对应日期页面，传递该日期的起始日期和结束日期
   goPage(startTime,endTime) {
     console.log(startTime,endTime);
     uni.navigateTo({
       url: `/pages/DateTask/DateTask?startTime=${startTime}&endTime=${endTime}`
     });
   },
   
  // 根据id跳转详情页
   goDetail(id) {
     uni.navigateTo({
       url: `/pages/taskState/taskState?id=${id}`
     });
   },
   
   addTask() {
     uni.navigateTo({
       url: `/pages/taskAdd/taskAdd`
     });
   }
 },

  }
</script>

<style lang="scss" scoped>
  .taskPage {
    width: 100%;
    min-height: 100vh;
    // height: 1000rpx;
    background-color: #f2f7f6;
    position: relative;
    overflow: hidden;
  }
  // 顶部半圆背景
  .bg {
    width: 100%;
    height: 390rpx;
    position: relative;
  }
  .userInfoBg {
      position: absolute;
      left: -40%;
      top: 0%;
      width: 1351rpx;
      height: 711rpx;
      border-radius: 50%;
      margin-top: -391rpx;
      overflow: hidden;
      background: linear-gradient(110deg, #80efb1 0%, #64c0b1 100%);
      // z-index: -1;
  }
  
  // 顶部在线状态
  .box-t {
    margin: 190rpx 34rpx 40rpx;
    display: flex;
    justify-content: space-between;
    .box-t-list {
      width: 216rpx;
      height: 176rpx;
      background-color: #ffffff80;
      border-radius: 10rpx;
      position: relative;
      overflow: hidden;
      z-index: 2;
      .tit {
        font-size: 32rpx;
        font-weight: 700;
        margin: 34rpx 15rpx 25rpx;
      }
      .taskNum {
        margin-left:15rpx;
        color: #61c0b3;
        // font-size: 20rpx
        span {
          font-size:  38rpx;
          font-weight: 700;
        }
        .NumColor1 {
          color: red;
        }
        .NumColor2 {
          color:orange
        }
        .Numcolor3 {
           color: #61c0b3;
        }
      }
      .triangle {
        position: absolute;
        bottom: 0;
        right: 0;
      }
      /* 设置第一个圆角 */
         #round-triangle{
              margin-left: 100px;
              width: 45rpx;
              height: 45rpx;
              background-color: #e7f6f4e6;
              border-bottom-right-radius: 30%; 
          }
          /* 在首部和尾部添加两个绝对定位的图形覆盖部分上面图形设置剩下两个圆角 */
          #round-triangle:before, #round-triangle:after{
              content:"";
              width: 45rpx;
              height: 45rpx;
              background-color: #e7f6f4e6;
              position: absolute;  
              border-top-right-radius:30% ; 
          } 
          /* 设置旋转、缩放、倾斜和平移让两个伪元素边缘与上面图形边缘重合 */
      #round-triangle:before{
            transform:rotate(-45deg) skewX(-45deg) scale(1.45,0.7) translate(-1%,-50%); 
       
        } 
        #round-triangle:after{
            transform:rotate(225deg) skewY(-45deg) scale(0.7,1.45) translate(46%,0);
        }
    }

  .img {
    position: absolute;
    bottom: 5%;
    right: 5%;
    image {
      width: 30rpx;
      height: 30rpx;
    }
  }
  }
  // 日期卡牌盒子
  .box-c {
    margin-top: -130rpx;
    padding: 0 20rpx;
    background-color: #f5faf9;
    .date {
      width: 100%;
      height: 100rpx;
      background-color: #f5faf9;
      white-space: nowrap;
        .dateCard {
          width: 72rpx;
          height: 98rpx;
          margin-right: 30rpx;
          background-color: #fff;
          box-shadow: 5rpx 0rpx 10rpx rgba(0,0,0,0.5);
          border: 1 rpx solid #ccc;
          text-align: center;
          line-height: 98rpx;
          display: inline-block;
          border-radius: 10rpx;
        }
        .cardFont {
          font-size: 26rpx
        }

    }
    
    .highlight {
      background-color: #70d5b1 !important;
      box-sizing: border-box;
    }
  }
  // 可下拉盒子
   .box-b {
     // margin-top: 40rpx;
     // height: 55%;
     width: 100%;
     padding: 0 0 20rpx;
     box-sizing: border-box;
     background-color: #f2f7f6;
     .listBox {
       height: 266rpx;
       box-sizing: border-box;
       margin: 0 26rpx 30rpx;
       background-color: #fff;
       box-shadow: 5rpx 0rpx 15rpx rgba(0,0,0,0.5);
       border-radius: 10rpx;
     }
     .listTit {
       display: flex;
       justify-content: space-between;
       margin: 42rpx 60rpx 10rpx;
       padding: 20rpx 0;
       height: 66rpx;
       .tit {
         color: #64c0b1;
         font-weight: 700;
       }
       .state {
         width: 100rpx;
         height: 44rpx;
         border-radius: 8rpx;
         font-size: 20rpx;
         text-align: center;
         line-height: 44rpx;
       }
       .stateColor1 {
          background-color: #fff0bf;
          color: orange;
          border: 3rpx solid #f3bf3a;
       }
       .stateColor2 {
          background-color: #c0efdb;
          color: #46d095;
          border: 3rpx solid #46d095;
       }
     }
     .listDetail {
       margin: 0 60rpx;
       border-top: 2px dashed #61c0b3;
       .txt {
         display: flex;
         margin: 15rpx 0;
         font-size: 28rpx;
         text {
           margin-left: 20rpx;
         }
         .pic {
           height: 36rpx;
           width: 36rpx;
           image{
             width: 36rpx;
             height: 36rpx;
           }
         }

       }
     }
   }
   
   // 若没有数据显示背景
   .box-bg {
     position: absolute;
     top: 50%;
     left: 50%;
      transform: translate(-50%, -20%);
     image {
       width: 480rpx;
       height: 380rpx;
     }
     
     .bg-txt {
       text-align: center;
       line-height: 10rpx;
       color: #ccc;
     }
   }
.addBtn {
  // position: absolute;
  // right: 10%;
  // top: 80%;
  width: 95%;
  height: 60rpx;
  color: #fff;
  background-color: #80efb1;
  text-align: center;
  line-height: 60rpx;
  border-radius:50rpx ;
  font-size: 40rpx;
  font-weight: 900;
  margin: 30rpx auto 10rpx;
}
  


</style>